<template>
  <div class="col-box">
    <div class="col-but">
      <span v-for="(i, k) in dateButList" :key="i.key" @click="changeBut(i, k)"
        :class="[k == isBc ? 'action-span-item' : '', 'span-item']">{{ i.name }}</span>
    </div>
    <slot></slot>

  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'dateChange'
  },
  props: ['checked'],
  watch: {
    checked: {
      handler (val) {
          if (val) {

          }else{
              this.isBc = -1
          }
      },
      deep: true,

    }
  },


  data() {
    return {
      isBc: -1,

      dateVal: [],
      obj: {

      },
      dateButList: [{
        key: '0',
        name: "7天内"
      },
      {
        key: '1',
        name: "15天内"
      },
      {
        key: '2',
        name: "30天"
      },
      {
        key: '3',
        name: "60天内"
      },

      ]
    }
  },

  methods: {
    changeBut(val, idx) {
      this.isBc = idx
      this.dateVal = []

      this.$emit('dateChange', val.key)

    },

  }
}
</script>

<style scoped lang="scss">
.col-box {
  display: flex;
  align-items: center;

  .col-but {

  }

  .span-item {
    color: #606266;
    border-radius: 4px;
    margin: 0 6px;
    /* background-color: aqua; */
    padding: 4px 8px;
    cursor: pointer;
  }

  .action-span-item {
    background-color: rgb(217, 236, 255);
    color: #1890ff;
  }
}
</style>
